import axios from "axios";
import { Rate,message} from "antd";
import 'antd/dist/antd.css';
import { React, useState, useEffect, useRef } from "react";
import InterIP from "../../IP/IP";
import './productDetails.css'
import { Outlet } from "react-router";
import { NavLink, useNavigate } from "react-router-dom";
import { Modal, Button } from "antd";
import CheckSizeWindow from "../../shoppingCart/checksizewindow";

export default function ProductDetails() {
  const number = useRef();
  const navigate = useNavigate();
  const [product, setProduct] = useState([]);
  const [buyNum, setBuyNum] = useState(1);
  const [buy_Number, setBuyNumber] = useState(1)
  let IP = InterIP().props.children;
  useEffect(() => {
    let IP = InterIP().props.children;
    let productId = localStorage.getItem('productId')
    let userId = document.cookie.slice(5);
    axios.post('http://' + IP + ':3000/index/product', {
      product_id: productId,
    }).then((res) => {
      setProduct((product) => product = res.data);
      // 浏览记录
      axios.post('http://' + IP + ':3000/user/addBrowsing', {
        product_id: res.data[0].product_id,
        commodity: res.data[0].product_name,
        commodity_img: res.data[0].product_img,
        introduce: res.data[0].product_brief,
        original_price: res.data[0].product_oldPrice,
        current_price: res.data[0].product_price,
        user_id: userId,
      }).then((res) => {
      })
    })


  }, [])
  //购物车
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = (e) => {
    setIsModalVisible(true);
    e.target.style.color = '#fff'
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel1 = () => {
    setIsModalVisible(false);
  };
  //添加确认订单
  const [isModalVisible1, setIsModalVisible1] = useState(false);

  const showModal1 = (e) => {
    setIsModalVisible1(true);
    e.target.style.color = '#fff'
  };

  const handleOk1 = () => {
    setIsModalVisible1(false);
  };
  const handleCancel11 = () => {
    setIsModalVisible1(false);
  };
  function num(num) {
    setBuyNum((buyNum) => buyNum = num)
  }
  const handleCancel = (store_name, product_name, product_number, product_specification, product_id, product_price, product_img, judge) => {
    return () => {
      setIsModalVisible(false);
      let userId = document.cookie.slice(5);
      if (judge === 'cart') {
        axios.post('http://' + IP + ':3000/index/addCart', {
          store_name: store_name,
          user_id: userId,
          cart_totalPrice: '0',
          product: '{"store_name":"' + store_name + '","product_name":"' + product_name + '","product_number":' + product_number + ',"product_specification":"' + product_specification + '","product_price":' + product_price + ',"product_img":"' + product_img + '","buy_number":' + buyNum + ',"product_id":' + product_id + '}',
        }).then((res) => {
          message.success(res.data.msg)
        })
      } else if (judge === 'ensure') {
        axios.post('http://' + IP + ':3000/index/ensure', {
          store_name: store_name,
          user_id: userId,
          totalPrice: product_price * buyNum,
          product: '{"product_name":"' + product_name + '","product_number":' + product_number + ',"product_specification":"' + product_specification + '","product_price":' + product_price + ',"product_img":"' + product_img + '","buy_number":' + buyNum + ',"product_id":' + product_id + '}'
          ,
        }).then((res) => {
          navigate('/home/confirmOrder')
        })
      }

    }
  };

  function clickNumMinus() {
    if (number.current.value <= 1) {
    } else {
      number.current.value--;
      setBuyNumber((buy_Number) => buy_Number = number.current.value)
    }
  }
  function clickNumAdd() {
    number.current.value++;
    setBuyNumber((buy_Number) => buy_Number = number.current.value)
  }

  var onOff = true;
  function collect(id, name, img, brief, oldPrice, price) {
    return () => {
      if (onOff) {
        let userId = document.cookie.slice(5);
        axios.post('http://' + IP + ':3000/user/addCollect', {
          product_id: id,
          commodity: name,
          commodity_img: img,
          introduce: brief,
          original_price: oldPrice,
          current_price: price,
          user_id: userId,
        }).then((res) => {
          console.log(res.data.msg);
        })
        onOff = false;
      } else {
        axios.post('http://' + IP + ':3000/user/delCollect', {
          product_id: id,
        }).then((res) => {
          console.log(res.data.msg);
        })
        onOff = true;
      }
    }
  }
  return (
    <div>
      <div className="lfy_productDetails">
        {product.map((data, k) =>
          <div className="lfy_productDetails_up" key={k}>
            <div className="lfy_productDetails_up_Img">
              <div className="lfy_productDetails_up_bigImg">
                <img src={data.product_img} alt="" />
              </div>
              <div className="lfy_productDetails_up_smallImg">
                <h6> </h6>
                <div>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <img src={data.product_img} alt="" />
                </div>
                <h6> </h6>
              </div>
            </div>
            <div className="lfy_productDetails_up_introduce">
              <header className="lfy_productDetails_up_introduce_header">
                <h6>{data.product_name}</h6>
                <h4>
                  <div>全国</div>
                  <div>自营</div>
                </h4>
              </header>
              <div className="lfy_productDetails_up_introduce_body">
                <div>{data.product_introduce}
                </div>
              </div>
              <div className="lfy_productDetails_up_introduce_buySize">
                <h6 className="lfy_productDetails_up_introduce_buySize_price">
                  <span className="clear">现价：￥{data.product_price}</span>
                  <span className="clear">原价：￥{data.product_oldPrice}</span>
                </h6>
                <h6 className="lfy_productDetails_up_introduce_buySize_specification">
                  <span className="clear">请选择规格</span>
                  <span className="clear">{data.product_number}{data.product_specification}</span>
                </h6>
                <div className="lfy_productDetails_up_introduce_buySize_submit">
                  <div className="lfy_productDetails_up_introduce_buySize_number">
                    <span>数量: </span>
                    <div onClick={clickNumMinus}>-</div>
                    <input type="text" defaultValue="1" ref={number}></input>
                    <div onClick={clickNumAdd}>+</div>
                    <span> 件</span>
                  </div>
                  <div className="lfy_productDetails_up_addCart">
                    <Button type="text" onClick={showModal} className="cart">
                      加入购物车
                    </Button>
                    <Modal
                      width={700}
                      height={700}
                      title="加入购物车"
                      visible={isModalVisible}
                      onOk={handleOk}
                      onCancel={handleCancel1}
                      footer={[<Button className="tyc_add_cart_btn" onClick={handleCancel(
                        data.store_name,
                        data.product_name,
                        data.product_number,
                        data.product_specification,
                        data.product_id,
                        data.product_price,
                        data.product_img,
                        'cart'
                      )} key={k}>添加到购物车 </Button>]}>
                      <CheckSizeWindow number={num} buyNumber={buy_Number} />
                    </Modal>
                  </div>
                  <div className="lfy_productDetails_up_onceBuy">
                    <Button type="text" onClick={showModal1} className="cart">
                      立即购买
                    </Button>
                    <Modal
                      width={700}
                      height={700}
                      title="请选择商品"
                      visible={isModalVisible1}
                      onOk={handleOk1}
                      onCancel={handleCancel11}
                      footer={[<Button className="tyc_add_cart_btn" onClick={handleCancel(
                        data.store_name,
                        data.product_name,
                        data.product_number,
                        data.product_specification,
                        data.product_id,
                        data.product_price,
                        data.product_img,
                        'ensure'
                      )} key={k + 1}>去结算</Button>]}>
                      <CheckSizeWindow number={num} buyNumber={buy_Number} />
                    </Modal>
                  </div>
                </div>
                <div className="lfy_productDetails_up_introduce_buySize_collect">
                  <div className="lfy_productDetails_up_introduce_buySize_collect_div1">
                    <Rate count="1" className="collect" onChange={collect(
                      data.product_id,
                      data.product_name,
                      data.product_img,
                      data.product_brief,
                      data.product_oldPrice,
                      data.product_price,
                    )} />
                    收藏此商品
                  </div>
                  <div className="lfy_productDetails_up_introduce_buySize_collect_div2">
                    分享到：
                  </div>
                </div>
              </div>
            </div>
          </div>

        )}
        <div className="lfy_productDetails_down">
          <h6>
            <div><NavLink to="/home/productDetails">商品详情</NavLink></div>
            <div><NavLink to="/home/productDetails/evaluate">商品评价</NavLink></div>
          </h6>
          <div>
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </div>

  )

}



